﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>mind.js简陋API</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
		body{
			text-align:center;
			background-color:#000;
			color:#fff;
			font:14px/1.8 "Microsoft Yahei","Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB",STHeiti !important;; 
		}
		table {
			margin-top:50px;
			border-collapse: collapse;
			border: 1px solid #666;
		}
		th {
			padding: 5px 20px;
			border: 1px solid #666;
			color:#66eecc;
		}
		td {
			padding: 5px 20px;
			border: 1px solid #666;
			color:orange;
			font-weight:bold;
		}
	</style>
    <script type="text/javascript" src="src/mind.js"></script>
    <script type="text/javascript">
    	mind(document).ready(function(){
    		var trueStatus = "<font color='green'>true</font>";
    		var trs = mind("#tab").find("tr");
    		for(var i = 1; i < trs.length; i++){
    			trs.eq(i).children().eq(0).html(i);
    		}
    		
    		mind("#checkAll").click(function(){
    				mind("#id").html(trueStatus);
    				mind(".clazz").html(trueStatus);
    				if(mind("center").attr("class") == "tag"){
    					mind("#tag").html(trueStatus);
    				}	
    				if(mind("#length_").length == 1){
    					mind("#length_").html(trueStatus);
    				}
    				if(mind("#size").size() == 1){
    					mind("#size").html(trueStatus);
    				}
    				if(mind(".get1").get().length == 2){
    					mind("#get1_").html(trueStatus);
    				}
    				if(mind(".get2").get(0).innerHTML == "get(index)"){
    					mind("#get2_").html(trueStatus);
    				}
    				if(mind("#val1").val() == "val()"){
    					mind("#val1_").html(trueStatus);
    				}
    				
    				mind("#val2").val("val(index)");
    				if(mind("#val2").val() == "val(index)"){
    					mind("#val2_").html(trueStatus);
    				}
    				if(mind("#html1").html() == "html()"){ 
    					mind("#html1_").html(trueStatus);
    				}
    				
    				mind("#html2").html("html(content)");
    				if(mind("#html2").html() == "html(content)"){ 
    					mind("#html2_").html(trueStatus);
    				}
    				if(mind("#text1").text() == "text()"){ 
    					mind("#text1_").html(trueStatus);
    				}
    				
    				mind("#text2").text("text(content)");
    				if(mind("#text2").text() == "text(content)"){ 
    					mind("#text2_").html(trueStatus);
    				}
    				
    				mind("#css").css("font-weight: bold;");
    				if(mind("#css").attr("style") == "font-weight: bold;" || mind("#css").attr("style") == "FONT-WEIGHT: bold" || mind("#css").attr("style")){ 
    					mind("#css_").html(trueStatus);
    				}
    				
    				mind("#css2").cssAppend("font-weight: bold;");
    				if(mind("#css2").attr("style") == "font-size: 16px; font-weight: bold;" || mind("#css2").attr("style") == "FONT-SIZE: 16px; FONT-WEIGHT: bold" || mind("#css2").attr("style")){ 
    					mind("#css2_").html(trueStatus);
    				}
    				
    				if(mind("#styleAttr").styleAttr("font-size") == "16px"){
    					mind("#styleAttr").styleAttr("text-align", "center");
    					if(mind("#styleAttr").styleAttr("text-align") == "center"){
    					mind("#styleAttr").styleAttr("text-align", "left");
    						mind("#styleAttr_").html(trueStatus);
    					}
    				}
    				
    				mind("#removeStyleAttr").removeStyleAttr("text-align");
    				if($mind.nospace(mind("#removeStyleAttr").css().toLowerCase()) == "font-size:16px;"){
    					mind("#removeStyleAttr_").html(trueStatus);
    				}
    				
    				if(mind("#attr1").attr("class") == "attr"){ 
    					mind("#attr1_").html(trueStatus);
    				}
    				mind("#attr2").attr("class","attr");
    				if(mind("#attr2").attr("class") == "attr"){ 
    					mind("#attr2_").html(trueStatus);
    				}
    				mind("#attr3").attr("class","attr",function(e){
    					e.attr("class","attr3");
    				});
    				if(mind("#attr3").attr("class") == "attr3"){ 
    					mind("#attr3_").html(trueStatus);
    				}
    				
    				mind("#attr4").removeAttr("class");
    				if(mind("#attr4").attr("class") == ""){ 
    					mind("#attr4_").html(trueStatus);
    				}
    				
    				mind("#addClass1").addClass("add");
    				if(mind("#addClass1").attr("class") == " add"||mind("#addClass1").attr("class") == "add"){ 
    					mind("#addClass1_").html(trueStatus);
    				}
    				
    				mind("#addClass2").addClass("add",function(e){
    					e.addClass("add2");
    				});
    				if(mind("#addClass2").attr("class") == " add add2"||mind("#addClass2").attr("class") == "add add2"){ 
    					mind("#addClass2_").html(trueStatus);
    				}
    				
    				mind("#removeClass1").removeClass("remove");
    				if(mind("#removeClass1").attr("class") == ""){ 
    					mind("#removeClass1_").html(trueStatus);
    				}
    				
    				mind("#removeClass2").removeClass("remove",function(e){
    					e.addClass("remove");
    				});
    				if(mind("#removeClass2").attr("class") == " remove"||mind("#removeClass2").attr("class") == "remove"){ 
    					mind("#removeClass2_").html(trueStatus);
    				}
    				
    				mind("#toggleClass1").toggleClass("toggle");
    				if(mind("#toggleClass1").attr("class") == " toggle"||mind("#toggleClass1").attr("class") == "toggle"){ 
    					mind("#toggleClass1_").html(trueStatus);
    				}
    				
    				mind("#toggleClass2").toggleClass("toggle1",function(e){
    					e.toggleClass("toggle2");
    				});
    				if(mind("#toggleClass2").attr("class") == " toggle2"||mind("#toggleClass2").attr("class") == "toggle2"){ 
    					mind("#toggleClass2_").html(trueStatus);
    				}
    				
    				mind("#append").append("append(string/dom,fn(e))");
    				if(mind("#append").html() == "append(string/dom,fn(e))"){
    					mind("#append_").html(trueStatus);
    				}else{
    					mind("#append").html("append(string/dom,fn(e))");
    				}
    				
    				var remove_ = mind("#_remove_");
    				if(remove_){
    					remove_.remove();
    					if(!mind("#_remove_")){
    						mind("#remove_").html(trueStatus);
    					}
    				}
    				
    				if(mind("#children").children().eq(0).html().toLowerCase() == "&nbsp;"){
   						mind("#children_").html(trueStatus);
    				}
    				
    				if(mind("#parent").parent().get(0).nodeName.toLowerCase() == "tr"){
   						mind("#parent_").html(trueStatus);
    				}
    				
    				var width_ = mind("#_width_").width();
    				if(width_ == '100'){ 
    					mind("#width_").html(trueStatus);
    				}
    				
    				var height_ = mind("#_height_").width();
    				if(height_ == '100'){ 
    					mind("#height_").html(trueStatus);
    				}
    				
    				var moveNodeLocationX = mind("#moveNodeLocation").offsetLeft();//IE会比Chrome多几十像素 
    				var moveNodeLocationY = mind("#moveNodeLocation").offsetTop();//IE会比Chrome多1像素
    				mind("#moveNode").cssAppend("left:" + (moveNodeLocationX + 10) + "px;top:" + (moveNodeLocationY - 2) + "px;").moveNode();
    		});
    		mind("#checkAll").click();
    		mind("tr").mouseover(function(){
    			mind(this).css("background-color:#333;cursor:pointer;");
    			
    		});
    		mind("tr").mouseout(function(){
    			mind(this).css("background-color:#000");
    		});
    		var layer1 = new $mind.layer({
				id : 'layerBtn',//注册监听器的元素ID
				useOverlay : true,
				width : 300,
				height : 300,
				top : mind("#layerBtn").offsetTop(),
				body : '<p>今天是星期四。</p><p>虽然还没到周末，但是你很想她了吧？</p>'
			});
    	});
    </script>
    
  </head>
  
  <body>
  	<center class="tag">
	    <table id="tab">
	    	<tr>
	    		<th>序号</th>
	    		<th>属性/方法</th>
	    		<th>描述</th>
	    		<th>状态</th>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>id选择器</td>
	    		<td>用法：mind("#id")</td>
	    		<td id="id"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>类选择器</td>
	    		<td>用法：mind(".clazz")</td>
	    		<td class="clazz"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>标签选择器</td>
	    		<td>用法：mind("td")</td>
	    		<td id="tag"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>length</td>
	    		<td>当前匹配的元素个数。</td>
	    		<td id="length_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>size()</td>
	    		<td>当前匹配的元素个数。</td>
	    		<td id="size"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td class="get1">get()</td>
	    		<td class="get1">取得所有匹配的 DOM 元素数组。</td>
	    		<td id="get1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td class="get2">get(index)</td>
	    		<td class="get2">取得其中一个匹配的元素。 index表示取得第几个匹配的元素。</td>
	    		<td id="get2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>
	    			<input id="val1" type="hidden" value="val()" />
	    			val()
	    		</td>
	    		<td>获得第一个匹配元素的当前值。(<i>限于具有value属性的元素使用</i>)</td>
	    		<td id="val1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>
	    			<input id="val2" type="hidden" value="val(str_)" />
	    			val(str)
	    		</td>
	    		<td>设置每一个匹配元素的值。(<i>限于具有value属性的元素使用</i>)</td>
	    		<td id="val2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="html1">html()</td>
	    		<td>取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。</td>
	    		<td id="html1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="html2">html(content_)</td>
	    		<td>设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。</td>
	    		<td id="html2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="text1">text()</td>
	    		<td>
	    			取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
	    		</td>
	    		<td id="text1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="text2">text(content_)</td>
	    		<td>
	    			设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "&lt;" 和 "&gt;" 替换成相应的HTML实体)。
				</td>
	    		<td id="text2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="css">css()/css(cssValue)</td>
	    		<td>
	    			获取或设置元素的style值，例如：mind("#id_").css("font-weight:bold;");
				</td>
	    		<td id="css_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="css2" style="font-size:16px;">cssAppend(cssValue)</td>
	    		<td>
	    			追加元素的style值，例如：mind("#id_").cssAppend("font-weight: bold;");
				</td>
	    		<td id="css2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="styleAttr" style="font-size:16px;">styleAttr(attr)/styleAttr(attr, value)</td>
	    		<td>
	    			获取第一个匹配元素的某个style属性值/设置所有匹配元素的style属性值，例如：mind("#id_").styleAttr("color"),返回#fff;
				</td>
	    		<td id="styleAttr_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="removeStyleAttr" style="font-size:16px;text-align:center;">removeStyleAttr(attr)</td>
	    		<td>
	    			删除所有匹配元素的指定style属性;
				</td>
	    		<td id="removeStyleAttr_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="attr1" class="attr">attr(attrName)</td>
	    		<td>
	    			取得第一个匹配元素的属性值。
				</td>
	    		<td id="attr1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="attr2">attr(attrName,attrValue)</td>
	    		<td>
	    			为所有匹配的元素设置一个属性值。
				</td>
	    		<td id="attr2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="attr3">attr(attrName,attrValue,fn(e))</td>
	    		<td>
	    			为所有匹配的元素设置一个属性值，之后调用fn(e)函数,参数e代表当前的对象（mind对象，不是dom对象）。
				</td>
	    		<td id="attr3_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="attr4" class="attr">removeAttr(attrName)</td>
	    		<td>
	    			删除指定名称的属性。
				</td>
	    		<td id="attr4_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="addClass1">addClass(className)</td>
	    		<td>
	    			为每个匹配的元素添加指定的类名。
				</td>
	    		<td id="addClass1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="addClass2">addClass(className,fn(e))</td>
	    		<td>
	    			为每个匹配的元素添加指定的类名，并在之后调用函数fn(e),参数e代表当前的对象（mind对象，不是dom对象）。
				</td>
	    		<td id="addClass2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="removeClass1" class="remove">removeClass(className)</td>
	    		<td>
	    			为每个匹配的元素删除指定的类名。
				</td>
	    		<td id="removeClass1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="removeClass2" class="remove">removeClass(className,fn(e))</td>
	    		<td>
	    			为每个匹配的元素删除指定的类名，并在之后调用函数fn(e),参数e代表当前的对象（mind对象，不是dom对象）。
				</td>
	    		<td id="removeClass2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="toggleClass1">toggleClass(className)</td>
	    		<td>
	    			每一个匹配的元素，如果存在（不存在）指定类就删除（添加）指定类。
				</td>
	    		<td id="toggleClass1_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="toggleClass2" class="toggle1">toggleClass(className,fn(e))</td>
	    		<td>
	    			每一个匹配的元素，如果存在（不存在）指定类就删除（添加）指定类，之后调用函数fn(e),参数e代表当前的对象（mind对象，不是dom对象）。
				</td>
	    		<td id="toggleClass2_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="append"></td>
	    		<td>
	    			向每个匹配的元素中追加内容元素，之后调用函数fn(e),参数e代表当前的对象（mind对象，不是dom对象）。
				</td>
	    		<td id="append_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="remove">remove()</td>
	    		<td>
	    			删除自身(们)。
				</td>
	    		<td id="remove_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="children">children()<span>&nbsp;</span></td>
	    		<td>
	    			获取第一个匹配元素下的所有子元素；
				</td>
	    		<td id="children_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="parent">parent()</td>
	    		<td>
	    			获取第一个匹配元素的父元素；
				</td>
	    		<td id="parent_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="width">width()</td>
	    		<td>
	    			获取第一个匹配元素的宽度(包含border但不包含padding)。
				</td>
	    		<td id="width_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td id="height">height()</td>
	    		<td>
	    			获取第一个匹配元素的高度(包含border但不包含padding)。
				</td>
	    		<td id="height_"><font color="red">false</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>moveNode([node])</td>
	    		<td>
	    			实现对元素的拖动，其中node为mind对象，表示可拖动的元素；不指定的话可拖动的元素为本身<span id="moveNodeLocation">&nbsp;</span>
				</td>
	    		<td><font color="blue">自测</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>offsetLeft()</td>
	    		<td>
	    			获取第一个匹配元素距浏览器左端的像素值(各浏览器之间有差异)
				</td>
	    		<td><font color="blue">自测</font></td>
	    	</tr>
	    	<tr>
	    		<td></td>
	    		<td>offsetTop()</td>
	    		<td>
	    			获取第一个匹配元素距浏览器顶端的像素值(各浏览器之间有差异)
				</td>
	    		<td><font color="blue">自测</font></td>
	    	</tr>
	    </table><br />
	    <input id="checkAll" type="button" value="全部检测" /><br/>
	    <div id="moveNode" style="cursor:move;">[拖动我吧]</div>
	    <div id="_remove_">&nbsp;</div>
	    <div id="_width_" style='width:100px;'>&nbsp;</div>
	    <div id="_height_" style='width:100px;height:100px;'>&nbsp;</div>
	    
    </center>
  </body>
</html>
